<template>
  <div class="detail-content" v-if="Object.keys(detail).length > 0">
    <div class="notice-title">{{ detail.noticeTitle }}</div>
    <div class="notice-time">
      {{ detail.updateTime ? parseTime(new Date(detail.updateTime)) : "" }}
    </div>
    <div class="notice-content">
      <common-editor-view
        :value="detail.noticeContent"
        :defaultSize="'14'"
      ></common-editor-view>
      <div
        class="notice-append"
        v-if="detail.fileName && detail.fileName.length > 0"
      >
        <div class="notice-append-title">附件</div>
        <div
          v-for="(item, index) in detail.fileName"
          :key="index"
          class="file-wrapper"
        >
          <div class="download-filename">
            <div
              @click="handleExport(item)"
              :class="item.exportLoading ? 'disabledExport' : 'enabledExport'"
            >
              <i class="el-icon-loading" v-if="item.exportLoading"></i> &nbsp;
              {{ item.fileName }}（{{ getFileSize(item.fileSize) }} ）
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommonEditorView from "@/components/CommonEditorView";
export default {
  components: {
    CommonEditorView,
  },
  data() {
    return {};
  },

  props: {
    detail: {
      type: Object,
      default: () => {},
    },
  },

  methods: {
    handleExport(item) {
      //导出
      this.$set(item, "exportLoading", true);
      this.download(
        "system/notice/downLoadNotic",
        {
          fileUrl: item.fileUrl,
        },
        item.fileName
      ).finally(() => {
        this.$set(item, "exportLoading", false);
      });
    },

    getFileSize(size) {
      if (size < 1024) {
        return Math.ceil(size) + " B";
      } else if (size / 1024 < 1024) {
        return Math.ceil(size / 1024) + " KB";
      } else if (size / 1024 / 1024 < 1024) {
        return Math.ceil(size / 1024 / 1024) + " MB";
      }
    },

    back() {
      this.$emit("back");
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-content {
  padding: 20px;
  height: 100%;
}
.notice-title {
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  word-break: break-all;
}
.notice-time {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
}
.notice-content {
  word-break: break-all;
  height: calc(100% - 100px);
  overflow-y: scroll;
  ::v-deep p {
    margin-top: 0 !important;
  }
  ::v-deep .common-editor-view {
    height: auto;
  }
  ::v-deep .ql-editor {
    padding: 0;
  }
}

.notice-append {
  .notice-append-title {
    margin-top: 20px;
    font-weight: 600;
    font-size: 13px;
  }
  .file-wrapper {
    margin-top: 10px;
    display: flex;
    font-size: 13px;
    width: 450px;
    justify-content: space-between;
    .download-filename {
      max-width: 100%;
      color: #409eff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .disabledExport {
      pointer-events: none;
      cursor: default;
    }
    .enabledExport {
      cursor: pointer;
    }
  }
}
</style>
